<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/util.css" />
<link rel="stylesheet" href="css/collect.css" />
<title>体验券列表</title>
<style>
.head_area .public_input span{
	width: 100px;font-size: 18px;
}
.head_area .public_input input,
.head_area .public_input select{
	width: 280px;margin-left: 10px;
}
</style>
</head>
<body>
<div class="content tyq_list">
	<div class="navigate_head clearfix">
		<p class="navi_current" onclick="window.location.href='tyq_list.html'">体验券列表</p>
		<p onclick="window.location.href='tyq_limiting.html'">限定名额</p>
		<p class="navi_null"></p>
	</div>
	
	<!--头部功能-->
	<div class="head_area flex_vertical">
		
		<div class="public_input">
			<span>预约状态：</span>
			<select class="appoint_status" style="width: 280px;">
				<option value="">请选择</option>
				<option value="wait">未预约</option>
				<option value="success">已预约</option>
				<option value="completed">已完成</option>
				<option value="invalid">已失效</option>
			</select>
		</div>
		<button class="search">搜索</button>
	</div>
	<table>
		<thead>
			<tr>
				<td>卡号</td>
				<td>患者名</td>
				<td>手机号</td>
				<td>产品名称</td>
				<td>预约时间</td>
				<td>状态</td>
				<!--<td>操作</td>-->
			</tr>
		</thead>
		<tbody class="tbody">
			
		</tbody>
	</table>
	<!--分页-->
	<div class="page flex_vertical">
		<button class="" onclick="indexPage()">首页</button>&nbsp;
		<button class="" onclick="backPage()"><上一页</button>&nbsp;
		<!--页码-->
		<p class="page_num">
			<!--<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>-->
		</p>....
		<button class="" onclick="nextPage()">下一页></button>&nbsp;
		<button class="" onclick="endPage()">末页</button>&nbsp;
		共<span class="all_recode">0 </span>记录&nbsp;|
		共<span class="all_page">0 </span>页&nbsp;
		到第<input class="select_page" />页&nbsp;
		<button class="confirm_page" onclick="skipPage()">确定</button>
	</div>
</div>
<script type="text/javascript" src="plug/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="plug/template-web.js"></script>
<script type="text/javascript" src="js/toggle.js" ></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/method.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<!--<script type="text/javascript" src="js/detail/ill.js"></script>-->
<!--评价列表-->
<script id="test_tyq_list" type="text/html">
	{{each data value}}
		<tr>
			<td>
				<div class="flex_all_center">
					<!--<img src="img/select.png"/>&nbsp;-->
					<span>{{value.sn}}</span>
				</div>
			</td>
			<td>{{value.username}}</td>
			<td>{{value.mobile}}</td>
			<td>{{value.experienceCouponName}}</td>
			<td>{{value.reservationDate}}</td>
			<td>{{if value.status=="wait"}}未预约{{else if value.status == "success"}}已预约{{else if value.status == "completed"}}已完成{{else if value.status == "invalid"}}已失效{{/if}}</td>
			<!--<td data_id ="{{value.id}}" class="font_green" onclick="(this)"></td>-->
		</tr>
	{{/each}}
</script>

<script>
//请求方法
function reqPage(data){
	console.log(data);
	control_page.init_page(data,function(data){
		//调用ajax
		$.get_ajax("/hospital/experienceCoupon/getList.json",data,function(data){
			console.log(data);
			var html = template('test_tyq_list',data);
			$(".tbody").html(html);
			//初始化分页
			control_page.currentPage(control_page.page_num,data.totalCount);
		});
	});
}

////体验券详情
//function editTyq(m){
//	var tyq_id = $(m).attr("data_id");
//	console.log(tyq_id);
//	window.localStorage.setItem("tyq_id",tyq_id);
//	window.location.href="tyq_list.html";
//}
</script>
<script>
var appoint_status="";
//预约状态
$(".appoint_status").change(function(){
	appoint_status = $(".appoint_status").val();
	console.log(appoint_status);
});
$(function(){
	reqPage(control_page.getData());
	//搜索
	$(".head_area .search").click(function(){
		//基本条件
//		var data = control_page.getData();
		var data = {
			"pageNumber":1,//当前页
			"pageSize":10//每页的长度
		}
		//预约状态
		if(appoint_status != ""){
			data.status = appoint_status;
			console.log(data);
		}
		reqPage(data);
	});
});
</script>
</body>
</html>
